import React, { Component } from "react";
import "./App.scss";
import "./icon.css";
export default class App extends Component {
  state = {
    // cpsl:0,
    // zj:0,
    shangpin0: [
      {
        id: 1,
        product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "588",
        origin_price: 599,
        num: 1,
        checked: true,
      },
      {
        id: 2,
        product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "588",
        origin_price: 599,
        num: 1,
        checked: true,
      },
    ],
  };
  jian = (index) => {
    let chanpin10 = this.state.shangpin0;
    chanpin10[index].num--;
    this.setState({
      shangpin0: chanpin10,
    });
  };
  jia = (index) => {
    let chanpin10 = this.state.shangpin0;
    chanpin10[index].num++;
    this.setState({
      shangpin0: chanpin10,
    });
  };
  cpsliang = () => {
    let cpsl = 0;
    this.state.shangpin0.map((zhi) => {
      if (zhi.checked) {
        cpsl += zhi.num;
      }
    });
    return cpsl;
  };
  zongjia = () => {
    let zj = 0;
    this.state.shangpin0.map((zhi) => {
      if (zhi.checked) {
        zj += zhi.num * zhi.price;
      }
    });
    return zj;
  };
  render() {
    return (
      <div className="gouwuche">
        <div className="libiao">
          {this.state.shangpin0.map((zhi, index) => {
            return (
              <div className="shangpin">
                <div className="gouxuan">
                  <span className="iconfont icon-xuanzhong1"></span>
                </div>
                <div className="tupian">
                  <img src={zhi.img_url} className="img" alt="" />
                </div>
                <div className="xinxi">
                  <p className="mianshu">{zhi.product_title}</p>
                  <div className="xinxi02">
                    <div className="jiage">
                      <span className="youhui">{zhi.price}</span>
                      <span className="yuanjia">{zhi.origin_price}</span>
                    </div>
                    <div className="shuliang">
                      <span
                        className="jian"
                        onClick={this.jian.bind(this, index)}
                      >
                        -
                      </span>
                      <soan className="shu">{zhi.num}</soan>
                      <span
                        className="jia"
                        onClick={this.jia.bind(this, index)}
                      >
                        +
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="xiadanqu">
          <div className="danzuo">
            <span className="xuan iconfont icon-xuanzhong1"></span>
            <span className="yxshu">已选（{this.cpsliang()}）</span>
          </div>
          <div className="jiner">
            <div className="zongjia">
              <p className="heji">合计：￥{this.zongjia()}</p>
              <p className="yiyh">以优惠：￥200</p>
            </div>
            <p className="xiadan">下单</p>
          </div>
        </div>
      </div>
    );
  }
}
// yarn add node-sass@npm:dart-sass
